<template>
  <div>
    <div class="excelright">
      <el-button type="primary"
        >导入excel表
        <el-dialog
          title="入库"
          class="dialogAdd"
          width="600px"
          :visible.sync="gmDr"
          @close="gmDrClose"
        >
          <el-form
            :model="gmDrform"
            :rules="addFormRules"
            ref="gmDrform"
            style="margin-right: 20px"
            label-position="right"
            label-width="100px"
            size="small"
          >
            <el-form-item label="入库日期" prop="storageTime">
              <el-date-picker
                v-model="gmDrform.storageTime"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="gmDrTimeChange"
              ></el-date-picker>
            </el-form-item>

            <el-row style="width: 100px; padding-right: 10px">
              <el-button @click="importExcel" size="mini" style="float: right"
                >导入</el-button
              >
            </el-row>
            <input
              type="file"
              ref="uploadExcel"
              v-show="false"
              accept=".xls,.xlsx"
              @change="readExcel"
            />
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="gmDr = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="gmDrSure"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </el-button>

      <!-- 导出excel文件 -->
      <el-button type="primary">
        <download-excel
          type="primary"
          class="export-excel-wrapper"
          :data="json_data"
          :fields="json_fields"
          name="filename.xls"
        >
          导出excel表
        </download-excel>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props:{},
  data () {
    return {
      gmDrform:{storageTime:""},//光猫导入
      gmDr:false,
      arrList:[],
           json_fields: {
        "工号": "jobnumber",    //常规字段
        "员工姓名（必填）": "name",   
        "手机号（必填）": "phone.mobile", //支持嵌套属性
        "部门": "department", //支持嵌套属性
        "职位": "post", //支持嵌套属性
        // "备用电话": {
        //   field: "phone.landline",
        //             //自定义回调函数
        //   callback: value => {
        //     return `Landline Phone - ${value}`;
        //   }
        // }
      },
      json_data: [
        {
          name: "魏佳",
          jobnumber: "2020001",
          post: "前端工程师",
          department: "开发部",
          phone: {
            mobile: "15701793476",
            landline: "13281357561"
          }
        },
      ],
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ]
    }
  },
  components: {},
  methods: {
    handleSelectedFile (convertedData) {
      console.log(convertedData)
    },
    gmDrClick(){ // 获取当前时间,并赋值给入库日期
    this.gmDr=true
    this.gmDrform.storageTime=this.nowTime()
  },

  gmDrTimeChange(val){//入库日期发生变化,保存到gmDrform.storageTime中
    this.gmDrform.storageTime=val
  },

  gmDrClose(){//关闭模态框,清除数据
      this.$refs.gmDrform.resetFields();
  },

importExcel() {
    this.dialogChangePwdVisible = true;
    this.$refs.uploadExcel.click();
        },
readExcel(e) {
    const files = e.target.files;
    if (files.length <= 0) {
        //如果没有文件名
        return false;
    }
    const fileReader = new FileReader();
    fileReader.onload = ev => {
      try {
        const data = ev.target.result;
        const workbook = XLSX.read(data, {
          type: "binary"
            
        });
      const wsname = workbook.SheetNames[0]; //取第一张表
      const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //获取到XLSX表格中的数据,并生成json格式的数据类型
      // console.log(ws,666);
      let arr = [];
      ws.forEach((value, index, ws) => {
        arr.push({
            typeNo: ws[index]["光猫型号"] + "",
            boxNo: ws[index]["光猫箱码"] + "",
            snNos: ws[index]["光猫SN码"] + "",
            storageTime:this.gmDrform.storageTime+"",
            name:"光猫",
            category:"光猫",
            remarks:"",

        });
      })
      for(let i in arr){
          let item = arr[i]
          for(let key in item){
            // console.log(item[key]);
            if(item[key] == "undefined"){
              delete item[key] 
            }
          }   
          }       
          this.arrList=arr//给arrList赋值,确定导入时传入
    } catch (e) {
        return false;
      }
    };
    fileReader.readAsBinaryString(files[0]);
},

  gmDrSure(){//确定导入
      let headers={//axios发送请求时,需要配置请求头
            headers:{ 'Accept': 'application/json','Content-Type': 'application/json' }  
            }
      this.startLoading();
      let url = this.config.httpHeadUrl + "/api/modem/admin/saveBatchModem";
      this.$axios.post(url, JSON.stringify(this.arrList),headers ).then(res => {
      this.$message.success("导入成功！");
      this.gmDr = false;
      this.handleCurrentChange(1);
      this.$refs.uploadExcel.value = "";//把之前导入的清空
      if(res.data.flag==0){
        this.$message("导入表头不正确")
        this.gmDr =true
      }
    },(error) => {
      console.log(error)
        this.$refs.uploadExcel.value = "";//把之前导入的清空
    })
},




  },
  mounted() {},
  computed: {},
  watch: {}
}
</script>

<style lang='scss' scoped>
.excelright {
  margin-left: 1000px;
}
</style>